<template>
	<view class="search flexR">
		<view class="search-main flexR">
			<view class="search-main-input">
				<u-input class="input" height="64" v-model="value" :placeholder="placeholder" trim :clearable="false" />
			</view>
			<u-icon class="search-main-icon" name="search" @click="handleSearch"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			real: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请输入内容'
			}
		},
		data() {
			return {
				value: ''
			}
		},
		watch: {
			value(val) {
				if (val) {
					if (this.real) {
						this.$emit('search', val)
					}
				} else {
					this.$emit('search', val)
				}
			},
		},
		onLoad() {

		},
		methods: {
			handleSearch() {
				this.$emit('search', this.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		// height: 110rpx;
		background-color: transparent;
		justify-content: center;
		align-items: center;
		padding: 0;
		width: 100%;
		margin-bottom: 32upx;

		.search-main {
			padding: 0 30rpx;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			background-color: #FFF;
			border-radius: 50rpx;
			position: relative;

			.search-main-icon {
				position: absolute;
				left: 30px;
				height: 44rpx;
				width: 44rpx;
				font-size: 44rpx;
				color: $text-color-card-title;
			}

			.search-main-input {
				flex: 1;
				margin-right: 10rpx;
				font-size: 28rpx;
				background-color: rgb(242, 242, 242);
				border-radius: 20px;

				.input {
					width: 100%;
					padding: 0 20px 0 50px !important;
				}

			}
		}
	}
</style>